// components/promotion-popup/index.js
Component({
  properties: {
    title: {
      type: String,
      value: ''
    },
    items: {
      type: Array,
      value: []
    },
    cancelText: {
      type: String,
      value: '取消'
    }
  },

  data: {
    isShow: false,
    animationData: {}
  },

  methods: {
    show() {
      this.setData({ isShow: true });
      this._showAnimation();
    },

    hide() {
      this._hideAnimation();
      const context = this;
      //界面的隐藏，需要在执行动画之后再执行
      setTimeout(function(){
        context.setData({ isShow: false });
      }, 300);
    },

    onItemClick(event) {
      const index = event.currentTarget.dataset.index;
      this.triggerEvent('itemtap', { index: index, item: this.data.items[index] });
      this.hide();
    },

    _showAnimation() {
      // this._hideAnimationRightNow();
      const context = this;
      //显示必须使用延迟，否则容易立即显示出来
      setTimeout(function(){
        console.log('动画显示');
        const animation = wx.createAnimation({
          duration: 300,
          timingFunction: 'ease-in-out'
        });
        animation.translateY('0%').step();
        context.setData({
          animationData: animation.export()
        });
      }, 300);
      
    },

    _hideAnimation() {
      console.log('动画隐藏');
      const animation = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease-in-out'
      });
      animation.translateY('100%').step();
      this.setData({
        animationData: animation.export()
      });
    },

    _hideAnimationRightNow() {
      console.log('动画立刻隐藏');
      const animation = wx.createAnimation({
        timingFunction: 'ease-in-out'
      });
      animation.translateY('100%').step();
      this.setData({
        animationData: animation.export()
      });
    }
  }
});
